<template>
  <el-dialog
    :title="$t('message.ckxq')"
    :visible.sync="isShowModal"
    width="1000px"
    :before-close="handleClose"
  >
    <div class="property-title">{{ $t('message.hdxx') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.yqpcmc') }}：</span>
        <span class="value">{{ detail.name }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.hdxm') }}：</span>
        <span class="value">{{ detail.projectName }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.hddd') }}：</span>
        <span class="value">{{ detail.siteName }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.hdrs') }}：</span>
        <span class="value">{{ detail.numInfo || '' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.bmfy') }}：</span>
        <span class="value">{{ detail.price || 0 }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.bmjjsj') }}：</span>
        <span class="value">{{ detail.endTime }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.hdsj') }}：</span>
        <span class="value">{{ detail.acTime }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.sort') }}：</span>
        <span class="value">{{ detail.sortNum || '' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.createTime') }}：</span>
        <span class="value">{{ detail.createTime }}</span>
      </div>
      <div style="width: 100%;">
        <span class="key">{{ $t('message.hdsm') }}：</span>
        <span class="value">{{ detail.info || '' }}</span>
      </div>
    </div>
    <div class="property-title mt20">{{ $t('message.bmryxx') }}</div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    >
      <template #btns>
        <el-button :loading="exportLoading" @click="exportExcel">{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.bmrxx')"
        prop="userInfo"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.bmsj')"
        prop="createTime"
        show-overflow-tooltip
      />
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="pageSizeChange"
    />

  </el-dialog>
</template>

<script>
import { getJointSiteInfo, exportJointMemberList, getJointMemberList } from '@/api'
import store from '@/store'
import { parseTime } from '@/utils/index'
import QueryForm from '@/components/QueryForm'
export default {
  components: {
    QueryForm
  },
  data() {
    return {
      detail: {},
      modalDialog: store.getters.dialog,
      isShowModal: false, // 弹窗
      listLoading: false,
      exportLoading: false,
      list: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      id: '',
      filters: {},
      queryFormConfig: {
        formItems: [
          {
            filed: 'userInfo',
            type: 'input',
            label: this.$t('message.bmrxx'),
            placeholder: this.$t('message.qsrbmrxx')
          }
        ],
        online: true
      }
    }
  },
  // created() {
  //   this.getTicketOrderDetail(this.$route.query.id)
  // },
  methods: {
    getDetail(id) {
      this.id = id
      this.getList(1)
      getJointSiteInfo({ param: { id }}).then((res) => {
        if (res.errorCode === '000000') {
          this.isShowModal = true
          this.detail = res.record
        }
      })
    },
    exportExcel() {
      this.exportLoading = true
      const { filters } = this
      exportJointMemberList({
        param: { ...filters, venueId: sessionStorage.getItem('venueId'), id: this.id }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => { this.exportLoading = false })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      getJointMemberList({ pagination, param: { venueId, ...filters, id: this.id }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
          this.$refs.table.doLayout()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleClose() {
      this.isShowModal = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>

.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
  color: #666666;
  display: inline-block;
  // width: 90px;
  // text-align: right;
}
.value {
  color: #222;
}
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
